<template>
	<ve-dialog
		width="510px"
		title="替换课件"
		:show.sync="isShow"
		:on-close="onCloseDialog"
	>
		<ve-content class="replace-form">
			<el-form
				:model="replaceForm"
				:rules="replaceFormRules"
				ref="replaceForm"
				label-width="90px"
			>
				<p class="tip-title">设置替换vid</p>
				<el-form-item label="课件vid：" prop="videoVid">
					<el-input
						style="width:70%"
						placeholder="请输入课件vid"
						v-model.trim="replaceForm.videoVid"
					/>
				</el-form-item>
			</el-form>
			<label class="tip">vid替换后，课件上传人、源文件名称、vid信息将同步更新为新文件信息；系统将清除原课件的打点信息（VID关联的打点记录不清除）。</label>
		</ve-content>
		<span slot="footer">
			<el-button type="primary" :loading="isLoading" @click="onReplace">
				确定
			</el-button>
			<el-button @click="onCloseDialog">
				取 消
			</el-button>
		</span>
	</ve-dialog>
</template>
<script>
import coursewareApi from "@rc/apis/rc/courseware.mjs";
export default {
    props:{
        isShow: {
            type: Boolean,
            default: false
        },
        resourceId: {
            type: String,
            required: true
        }
    },
    data() {
      return {
          replaceForm: {
            videoVid: '',
          },
          replaceFormRules: {
            videoVid: [
                {
                    required: true,
                    message: '请输入课件vid',
                    trigger: 'blur'
                },
            ]
          },
          /* 加载中*/
          isLoading: false
      };
    },
    methods: {
        /**
         * @description 重置表单数据
         */
        reset() {
            this.replaceForm = {
                videoVid: ''
            };
            this.$refs.replaceForm.resetFields();
        },
        /**
         * @description 关闭弹窗
         */
        onCloseDialog() {
            this.reset();
            this.$emit('close');
        },
        /**
         * @description 替换课件
         */
        onReplace() {
            this.$refs.replaceForm.validate(valid => {
                if (!valid) {
                    return;
                }
                this.$confirm('确认替换课件?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.isLoading = true;
                    coursewareApi.updateResourceVideo({
                        data: {
                            resourceId: this.resourceId,
                            videoVid: this.replaceForm.videoVid
                        },
                        success: () => {
                            this.$emit('replace');
                            this.$message.success('替换操作成功');
                            this.onCloseDialog();
                        },
                        complete: () => {
                            this.isLoading = false;
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            });

        }
    }
  };

</script>
<style lang="less" scoped>
    .replace-form{
        .tip-title{
            font-size: 15px;
            font-weight: bold;
            color: #606266;
            margin-bottom: 10px;
        }
        /deep/ .el-form-item__label{
            text-align: left;
        }
        .tip{
            font-size: 13px;
            color: #909399;
            line-height: 19px;
        }
    }

</style>
